<script setup>
import { ref } from "vue";
import { Delete, Search } from "@element-plus/icons-vue";
import axios from "@/util/axios";
import { ElMessage, ElMessageBox } from 'element-plus'
// 引入详情页子组件
import Details from "./components/details.vue";

const queryForm = ref({
  query: "",
  pageNum: 1,
  pageSize: 10,
});

const total = ref(0);

const tableData = ref([]);

//定义是否显示详情页子组件，默认false
const detailsVisible = ref(false)

//定义:id="id"传订单详情的id,默认为-1
const id = ref(-1)

const initOrderList = async () => {
  const res = await axios.post("admin/order/list", queryForm.value);
  tableData.value = res.data.orderList;
  
  total.value = res.data.total;
};

initOrderList();

// 实现页数
const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = pageSize;
  initOrderList();
};
const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum;
  initOrderList();
};

const userNickNameFormatter = (row) => {
  return row.user.nickName || "";
};


const statusFormatter = (row) => {
  switch (row.status){
    case 1:
      return "待发货"
    case 2:
      return "待收货"
    case 3:
      return "退款/换货"  
    case 4:
       return "待评价"
    case 5:
       return "已完成"
  }
}

//发货和退货状态切换功能
const handlOrderStatus=(id,status)=>{
  ElMessageBox.confirm(
    '是否确定更新订单状态？',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  //执行成功
    .then(async() => {
      let res = await axios.post("/admin/order/updateStatus",{id:id,status:status})
      if(res.data.code==0){
        ElMessage({
        type: 'success',
        message: '更新成功',
      })
  initOrderList();
      }else{
        ElMessage({
        type: 'error',
        message: res.data.msg,
      })
      }
    })
    //遇到异常执行
    .catch(() => {
     
    })
}



//删除功能
const handlDelete=(id,status)=>{
  ElMessageBox.confirm(
    '是否确定删除订单？',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  //执行成功
    .then(async() => {
      let res = await axios.get("/admin/order/delete/"+id)
      if(res.data.code==0){
        ElMessage({
        type: 'success',
        message: '删除成功',
      })
  initOrderList();
      }else{
        ElMessage({
        type: 'error',
        message: res.data.msg,
      })
      }
    })
    //遇到异常执行
    .catch(() => {
     
    })
}



//详情功能
const handlDetailsValue=(orderId)=>{
  id.value = orderId;
  // 点击详情按钮时变成true才显示详情页子组件
  detailsVisible.value = true
}

</script>

<template>
  <!-- el-card悬浮框 -->
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input
          placeholder="请输入订单号搜索"
          v-model="queryForm.query"
          clearable
        ></el-input>
      </el-col>
      <el-button type="button" :icon="Search" @click="initOrderList"
        >搜索</el-button
      >
    </el-row>
    <el-table :data="tableData" height="500" style="width: 100%">
      <!-- fixed是冻结用的，简单点说就说把订单号这一列固定不动，向右边滑动时订单号固定着 -->
      <el-table-column prop="orderNo" label="订单号" width="250" fixed />
      <el-table-column prop="user" label="用户名称" width="100">
        <template #default="scope">
          <div>{{ scope.row.user ? scope.row.user.nickName : "" }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="payDate" label="订单支付日期" width="200" /> -->
      <el-table-column prop="consignee" label="收货人" width="100" />
      <el-table-column prop="telNumber" label="联系电话" width="150" />
      <el-table-column prop="address" label="收货地址" width="200" />
      <el-table-column prop="totalPrice" label="订单总价" width="100" />
      <el-table-column prop="status" label="订单状态" width="100" :formatter="statusFormatter" />
      <el-table-column prop="createDate" label="订单创建日期" width="200" />

      <el-table-column prop="action" label="操作" width="300" fixed="right">
        <template v-slot="scope">
          <!-- 括号后面是传入什么数据 -->
          <el-button type="success" @click="handlDetailsValue(scope.row.id)">详情</el-button>
          <el-button type="primary" @click="handlOrderStatus(scope.row.id,2)">发货</el-button>
          <el-button type="warning" @click="handlOrderStatus(scope.row.id,3)">退货</el-button>
          <el-button type="danger" :icon="Delete" @click="handlDelete(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[10, 20, 30, 40, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>

  <!-- 使用详情页子组件 -->
  <Details v-model="detailsVisible" :id="id"></Details>
</template>

<style scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}
.el-pagination {
  padding-top: 15px;
  box-sizing: border-box;
}
</style>